<template>
  <tm-app>
    <!--  -->
    <tm-sheet color="primary" round="0" margin="0" :padding="[40, 0]">
      <tm-row align="center" color="primary">
        <tm-image
          :preview="false"
          :round="100"
          :width="88"
          :height="88"
          :src="userInfo.avatarUrl"
        ></tm-image>

        <tm-sheet color="transparent" :margin="[10, 0]" class="flex-1">
          <tm-text color="#fff" class="mr-10">{{ userInfo.name }}</tm-text>
          <tm-row>
            <tm-text color="#fff" fontSize="24"
              >{{ $trans('pages.personal.inviteId') }}: {{ userInfo.inviteId }}</tm-text
            >
            <tm-button
              skin="dashed"
              round="20"
              width="80"
              height="32"
              class="ml-n5"
              @click="onCopyId"
            >
              <tm-text color="#fff" font-size="18">{{ $trans('pages.personal.copy') }}</tm-text>
            </tm-button>
          </tm-row>
        </tm-sheet>

        <tm-icon name="arrow-right-s-line" color="#fff" size="30"></tm-icon>
      </tm-row>
    </tm-sheet>
    <!--  -->
    <tm-sheet class="relative overflow flex" :margin="[40]" round="15" padding="0" height="132">
      <tm-image
        :preview="false"
        class="absolute l-0 t-0 fulled fulled-height"
        :src="GradeBgImg"
        model="scaleToFill"
      ></tm-image>
      <tm-row class="fulled">
        <tm-image
          :preview="false"
          width="86"
          height="98"
          :src="UserLevelModel"
          class="ml-n5"
        ></tm-image>
        <tm-sheet
          color="transparent"
          class="flex-1 flex flex-col flex-around"
          :margin="[20, 0, 20, 0]"
          padding="0"
          height="100%"
        >
          <tm-row align="center" justify="space-between" class="fulled">
            <tm-text>{{ userInfo.vipName }}</tm-text>
            <tm-button color="#000" height="44">
              <tm-text class="text-weight-s" color="#fff">{{
                $trans('pages.personal.viewRights')
              }}</tm-text>
              <tm-icon name="arrow-right-s-line" color="#fff"></tm-icon>
            </tm-button>
          </tm-row>
          <tm-row class="fulled" column="3">
            <tm-col :span="1">
              <tm-row align="center">
                <tm-image
                  :preview="false"
                  :src="IconPersonalRate"
                  :width="24"
                  :height="24"
                  class="mr-n2"
                ></tm-image>
                <tm-text color="#000001" fontSize="22">{{
                  $trans('pages.personal.vip.rate')
                }}</tm-text>
              </tm-row>
            </tm-col>
            <tm-col :span="1">
              <tm-row align="center">
                <tm-image
                  :preview="false"
                  :src="IconPersonalInstant"
                  :width="24"
                  :height="24"
                  class="mr-n2"
                ></tm-image>
                <tm-text color="#000001" fontSize="22">{{
                  $trans('pages.personal.vip.instant')
                }}</tm-text>
              </tm-row>
            </tm-col>
            <tm-col :span="1">
              <tm-row align="center">
                <tm-image
                  :preview="false"
                  :src="IconPersonalSecurity"
                  :width="24"
                  :height="24"
                  class="mr-n2"
                ></tm-image>
                <tm-text color="#000001" fontSize="22">{{
                  $trans('pages.personal.vip.security')
                }}</tm-text>
              </tm-row>
            </tm-col>
          </tm-row>
        </tm-sheet>
      </tm-row>
    </tm-sheet>
    <!--  -->
    <tm-sheet round="0" margin="0">
      <tm-cell
        v-for="(item, index) in cellList"
        :key="index"
        :title="item.name"
        icon="custom"
        @click="onCellClick(item)"
      >
        <template #avatar v-if="item.icon">
          <tm-image :preview="false" :src="item.icon" :width="80" :height="80"></tm-image>
        </template>
      </tm-cell>
    </tm-sheet>
  </tm-app>
</template>
<script lang="ts" setup>
  import { getDefaultColor } from '@/uni_modules/tm-ui/libs/colors';
  import { translate } from '@/locale';
  import GradeBgImg from '@/assets/images/personal-grade-bg.png';
  import UserLevelModel from '@/assets/images/personal-level-medal.png';
  import IconPersonalRate from '@/assets/images/personal-icon-rate.png';
  import IconPersonalInstant from '@/assets/images/personal-icon-instant.png';
  import IconPersonalSecurity from '@/assets/images/personal-icon-security.png';
  import { assetsImgs } from '@/assets/images';

  const defaultColor = ref('');
  const userInfo = ref({
    avatarUrl: 'https://store.tmui.design/api_v2/public/random_picture',
    name: 'Jabari',
    vipName: 'Bronze VIP',
    inviteId: '12345',
  });

  const cellList = ref([
    {
      icon: assetsImgs.PersonalMyEarnings,
      name: translate('pages.personal.cell.myEarnings'),
      link: '',
    },
    {
      icon: assetsImgs.PersonalBankAccount,
      name: translate('pages.personal.cell.bankAccount'),
      link: '',
    },
    {
      icon: assetsImgs.PersonalIconSecurity,
      name: translate('pages.personal.cell.security'),
      link: '',
    },
    {
      icon: assetsImgs.PersonalHelpCenter,
      name: translate('pages.personal.cell.helpCenter'),
      link: '',
    },
    {
      icon: assetsImgs.PersonalFeedback,
      name: translate('pages.personal.cell.feedback'),
      link: '',
    },
    {
      icon: assetsImgs.PersonalAboutUs,
      name: translate('pages.personal.cell.aboutUs'),
      link: '',
    },
    {
      icon: assetsImgs.PersonalLogout,
      name: translate('pages.personal.cell.logout'),
      link: '',
    },
    {
      icon: null,
      name: '中文',
      command: 'language',
      langs: 'zh-Hans',
    },
    {
      icon: null,
      name: 'English',
      command: 'language',
      langs: 'en',
    },
  ]);

  const onUserInfoClick = () => {};

  const onCellClick = (item: any) => {
    if (item.command === 'language') {
      uni.setLocale(item.langs);
      uni.showToast({
        title: `${translate('common.switchLocale')}:${item.name}`,
        icon: 'success',
      });
    }
  };

  const onCopyId = () => {
    uni.setClipboardData({
      data: userInfo.value.inviteId,
      success: () => {
        uni.showToast({
          title: translate('pages.personal.copySuccess'),
          icon: 'none',
        });
      },
    });
  };

  onMounted(() => {
    defaultColor.value = getDefaultColor('primary');
  });
</script>
<style lang="scss">
  page {
    background-color: #fff;
  }
</style>
